<template>
  <div>
        <div class="titler">
            <router-link to="/">
                <img src="../../assets/头部.png" alt="" />
            </router-link>
                
        </div>
        <div class="wrap">
            <router-link to="/">
                 <span>«</span>
            </router-link>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in image" :key="item.id">
                <img :src="item.path" alt=""/>
            </van-swipe-item>
        </van-swipe>
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <router-link to="/shopping">
                <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.state.cart.cartList.length" />
            </router-link>
            <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="addshop" />
            <van-action-bar-button color="#7232dd" type="danger" text="立即购买"   @click="addshop" />
        </van-action-bar>
        <div class="main">

            <span>¥<em>{{ price }}</em></span>
            <div class="main_text" >{{desc}}</div>
        </div>

        <div v-html="text" class="merchandise"></div>
       <!-- <van-popup   v-model:show="show" closeable close-icon="close" position="bottom" :style="{ height: '40%' }">
            <div class="cart">
                <div class="cart_img">
                    <img :src="image[0].path" alt=""/>
                </div>
                <div class="cart_xinxi">
                    <div class="cart_xinxi_title">标题</div>
                    <div class="cart_xinxi_price">￥：价格</div>
                </div>
                <div class="cart_anniu">
                    <van-stepper v-model="count" class="anniu" theme="round" button-size="22" disable-input />
                </div>
                
            </div>
            <van-button class="course" round type="primary" >确认添加</van-button>
       </van-popup> -->
  </div>
</template>


<script setup>
import { useStore } from 'vuex'

import { Stepper } from 'vant';
import { Button } from 'vant';
import { Card } from 'vant';
import { Popup } from 'vant';
import { Swipe, SwipeItem } from 'vant';
import { useRoute } from "vue-router";
import { get } from "../../utils/request.js";
import {post} from "../../utils/request.js"
import { ref } from "vue";
import router from '@/router/index.js';
import { computed } from '@vue/reactivity';

const store = useStore()

console.log("store", store.state.cart.cartList);
// console.log(store);
let route = useRoute();
let image = ref("");
let price = ref("");
let text = ref('');
let desc = ref('')
const count = ref(1);
//id重新赋值
let id = route.params.id;
// console.log(route.params.id);

//根据id获取对应商品的数据
let Getgoods = async () => {
  let res = await get(`/goods/${id}`);
  image.value = res.result.s_goods_photos
  price.value = res.result.price;
  text.value = res.result.rich_text
  desc.value = res.result.desc

//   console.log(res);
};
Getgoods();

// 点击事件
// const show = ref(false);
const addshop = () => {
//    show.value = true;
    let GetshoppingCart = async()=>{

        let data = JSON.stringify({
           "goods_id": id,
           "num": 1,
           "project_id": "244"
        });
        let res= await post(`/shoppingCart`,data)
        console.log(res);  
        
    };
    
    GetshoppingCart()
}


</script>



<style lang="scss" scoped>

.titler{
    width: 100%;
    height: 0.2rem;
}
.wrap{
    display: flex;
    width: 100%;
    height: 0.35rem;
    background-color: #F5F5F5;
    span{
        margin-left: 0.1rem;
        width: 0.2rem;
        height: 0.35rem;
        font-size: 0.32rem;
        line-height: 0.25rem;
    }
}
.my-swipe .van-swipe-item {
  height: 3.75rem;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  //   background-color: #39a9ed;
  img {
    width: 100%;
    display: block;
    height: auto;
  }
}
.main {
    padding:0 0.18rem;
    span {
        font-size: 0.16rem;
        color: #ff4142;
        display: block;
        em {
            font-size: 0.3rem;
            font-style: normal;
            color: red;
        }
    }
    .main_text{
        margin-top: 0.1rem;
        width: 100%;
        height: 0.8rem;
        font-size: 0.16rem;
        line-height: 0.3rem;
        font-weight: bold;
        background-color: plums;
    }
}
.merchandise{
    margin-top: 0.2rem;
    
}
.cart{
    display: flex;
    margin-top: 0.5rem;
    width:100%;
    height: 1.5rem;
    background-color: #F5F5F5;

    .cart_img{
        width: 1.2rem;
        height: 1.5rem;
        background-color: red;

        img{
            width: 1.2rem;
            height: 1.5rem;
        }
    }
    .cart_xinxi{
        width: 1.5rem;
        height: 1.5rem;

        .cart_xinxi_title{
            width: 1.5rem;
            height: 0.6rem;
        }
        .cart_xinxi_price{
            margin-top: 0.4rem;
            width: 1.5rem;
            height: 0.5rem;
            font-size: 0.16rem;
            line-height: 0.5rem;
        }
    }
    .cart_anniu{
        margin-top: 1.25rem;
        margin-left: 0.13rem;
        width: 0.85rem;
        height: 0.25rem;
    }

}
.course{
    margin-top: 0.1rem;
    left: 10%;
    width: 3rem;
    height: 0.5rem;
}
</style>

